<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="headTitle">湖州市应急综合监管平台</div>
      <div class="loginBox">
        <div class="loginTitle">欢迎登录</div>
        <div class="formBox">
          <el-form :rules="rules" ref="ruleForm" :model="form">
            <el-form-item prop="name">
              <el-input v-model="form.name">
                <i slot="prefix" class="iconfont icon-yonghu"> </i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password">
                <i slot="prefix" class="iconfont icon-zhanghaomima"></i>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="confirmBtn" @click="submitForm">登 录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { newLogin } from '@/api/login'
export default {
  name: 'indexVue',
  props: {},
  components: {},
  data() {
    return {
      form: {
        name: '',
        password: '',
      },
      rules: {
        name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
  methods: {
    async newLogin() {
      const res = await newLogin({
        username: this.form.name,
        password: this.form.password,
      })
      if (res.code === 200) {
        await this.$store.commit('user/setToken', res.data)
        this.$message.success('登录成功')
        await this.$store.dispatch('user/getMenuList', { id: res.data.role_id })
        console.log(this.$store.getters.menuList)
        this.$router.push({
          path: this.$store.getters.menuList[0].path,
        })
      } else {
        this.$message.error('登录失败，请稍后重试')
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.newLogin()
        } else {
          this.$message.error('登录失败，请稍后重试')
          return false
        }
      })
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background: #fff url('@/assets/背景图@1x.png') no-repeat;
  background-size: 100%;
  position: relative;
  .headTitle {
    position: absolute;
    left: 170px;
    top: 170px;
    color: #0f9584;
    font-size: 40px;
  }
  .loginBox {
    background-image: url('@/assets/矩形 28271@1x.png');
    background-repeat: no-repeat;
    width: 560px;
    height: 570px;
    position: absolute;
    left: 153px;
    top: 270px;
    padding-top: 64px;

    .loginTitle {
      text-align: center;
      font-size: 30px;
      color: #646464;
    }
    .formBox {
      padding: 0 40px;
      padding-top: 60px;
      ::v-deep .el-input__inner {
        background-color: #f6f6f6 !important;
      }
      ::v-deep .el-input__prefix {
        width: 25px;
      }
    }
    .confirmBtn {
      width: 450px;
      height: 55px;
      background-color: #0f9584;
      text-align: center;
      line-height: 55px;
      border-radius: 5px;
      margin: 0 auto;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      margin-top: 130px;
    }
  }
}
</style>
